<!DOCTYPE html>
<html>
    <head>
        <meta charset=utf-8>
        <link rel=match href=border_radius_asymmetric_sizes_ref.html>
        <style type="text/css">
         div.box {
             background: white;
             border-width: 10px 10px 10px 10px;
             border-color: yellow red green blue;
             border-radius: 10px;
             border-style: solid;
             height: 190px;
             width: 190px;
         }
         div.top  {
             border-top-width: 30px;
         }
         div.right  {
             border-right-width: 30px;
         }
         div.bottom  {
             border-bottom-width: 30px;
         }
         div.left  {
             border-left-width: 30px;
         }
         div.radius10px {
             border-radius: 10px;
         }
         div.radius20px {
             border-radius: 20px;
         }
         div.radius30px {
             border-radius: 30px;
         }
         div.radius40px {
             border-radius: 40px;
         }

         #box2, #box4, #box6, #box8, #box10, #box12, #box14 {
             width: 170px;
         }
        </style>
    </head>
    <body>
        <h2>Border Radius - 10px</h2>
        Box#1<div id="box1" class="box top"></div><br>
        Box#2<div id="box2" class="box right"></div><br>
        Box#3<div id="box3" class="box bottom"></div><br>
        Box#4<div id="box4" class="box left"></div><br>

        <h2>Border Radius - 20px</h2>
        Box#5<div id="box5" class="box top radius20px"></div><br>
        Box#6<div id="box6" class="box right radius20px"></div><br>
        Box#7<div id="box7" class="box bottom radius20px"></div><br>
        Box#8<div id="box8" class="box left radius20px"></div><br>

        <h2>Border Radius - 30px</h2>
        Box#9<div id="box9" class="box top radius30px"></div><br>
        Box#10<div id="box10" class="box right radius30px"></div><br>
        Box#11<div id="box11" class="box bottom radius30px"></div><br>
        Box#12<div id="box12" class="box left radius30px"></div><br>

        <h2>Border Radius - 40px</h2>
        Box#13<div id="box13" class="box top radius40px"></div><br>
        Box#14<div id="box14" class="box right radius40px"></div><br>
        Box#15<div id="box15" class="box bottom radius40px"></div><br>
        Box#16<div id="box16" class="box left radius40px"></div><br>
    </body>
</html>
